<%--
  Created by IntelliJ IDEA.
  User: app
  Date: 2018/7/28
  Time: 下午9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/loadingStyle.css">
    <title>购物车</title>
</head>
<body>
<div>
    <div class="dropdowm" style="margin-left:220px;margin-right:210px;height:100px;background-color:#a0a0a0;border-radius:15px;">
        <span style="color: white;font-size:25px;float:left;margin-left:20px;margin-top:33px;"><i class="glyphicon glyphicon-shopping-cart"></i>   我的购物车</span>
        <a href="homeAction.action" style="color: white;float:right;font-size:16px;margin-right:9px;margin-top:20px;text-decoration:none;"><i class="glyphicon glyphicon-home"></i>主页</a>
    </div>
</div>
<div style="height:55px"></div>
<div>
    <c:forEach items="${shoppingList}" var="book">
        <div class="checkbox" style="margin-left:220px;margin-right:210px;border-bottom:1px solid #a0a0a0;padding:17px;">
            <label style="width:100%;">
                <input type="checkbox" style="margin-top:30px;height:20px;width:20px;" value="${book.bid}">
                <img src="${book.url}" height="92px" width="60px" style="margin-left:12px"/>
                <span style="font-size:15px;margin-left:15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《${book.bname}》</span>  <!--书名-->
                <span style="font-size:15px;margin-left:15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单价:${book.oprice}</span>  <!--价格-->
            </label>
        </div>
    </c:forEach>
    <div style="float:right;margin-right:230px;">
        <input class="btn" type="button" value="删除" id="deleteBtn">
        <input class="btn" type="button" value="购买"  id="toBuyBtn">
    </div>

</div>
</body>

<script type="text/javascript">
    $("#toBuyBtn").click(function () {

        var bookIds = "";
        $("input[type=checkbox]:checked").each(function(){
            bookIds += $(this).val() + ",";
        });
        bookIds = bookIds.substring(0,bookIds.length - 1);
        if (bookIds == "")
            alert("无选中书籍");
//        alert(bookIds);
        else if(bookIds.indexOf(",")>0){
            alert("请一次选择一本")
        }else window.location.href="generateOrderAction?bid="+bookIds;
    });

    $("#deleteBtn").click(function(){
        var bookIds=""
        $("input[type=checkbox]:checked").each(function(){
            bookIds += $(this).val() + ",";
        });
        bookIds = bookIds.substring(0,bookIds.length - 1);

//        $("input[type='checkbox']").each(function(){
//            if($(this).is(':checked')){
//                $(this).parent().parent().remove();
//            }
//        });
        if (bookIds == "")
            alert("无选中书籍");
        else
            window.location.href="deleteShopTrolleyItemAction?bid="+bookIds;
    });

</script>
</html>

